【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 4

Modern Web

給初入JS框架新手的React.js入門系列第 4 篇

【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始

11th鐵人賽 reactjs javascript

Andy Chang

2019-09-15 14:33:52

29743 瀏覽

分享至

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

這個系列和我在12屆鐵人賽的React.js系列文，已經在修訂後和深智數位合作出版成實體書，在天瓏開始預購了，想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

Part.1 - HelloWorld

現在，我們的專案結構應該是這個樣子:

(.vscode)
|____ (launch.json)
    
public
|____ index.html
|____ favicon.ico
|____ manifest.json

src
|____ index.js
|____ index.css
|____ App.js
|____ App.css
    
node_modules
package.json
package-lock.json
README.md
.gitignore

請打開src資料夾下的index.js
將下面這一行

ReactDOM.render(<App />, document.getElementById('root'));

修改為

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

現在打開localhost:3000，就會看到

我們的第一個React程式就完成了。

Part.2 - React運作原理 - 拆解HelloWorld

咦? 我到底做了什麼?
為什麼要呼叫ReactDOM ?
為什麼js裡面出現了html ?

你現在心裡可能這麼想著
現在，我們就來解析這個Hello world的運作流程。
建議先到前一篇稍微了解DOM再開始往下閱讀歐~

Part.2-1 - React virtual DOM

前面提過，我們以往在寫網頁時常常直接對DOM操作
而React特別的地方在，當我們寫React時，是對React自己的DOM操作。

React DOM函式ReactDOM.render()是React的程式進入點，正確的說法是React的 virtual DOM 。
那什麼是virtual DOM ? 這是React官方的解釋:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

React不是像過去我們操作DOM時一樣「一個指令一個動作」，而是先用js做出一個模擬的DOM，當畫面產生改變，React會把更改的地方放入virtual DOM，和原本的DOM比較後，再去更改DOM上「必須更改的地方」。

一開始會有點難理解，這邊先簡單知道這件事就好。我們會在最後一篇回過頭來談virtual DOM更詳細的原理、為什麼要這樣做...等。

Part.2-2 - 程式流程

總體來說，React運作的流程是這樣的

把要渲染的內容丟入ReactDOM -> ReactDOM整理要渲染的內容 -> 對原始綁定的div在DOM上的位置做渲染 -> 完成畫面渲染

我們從程式碼來看這個過程。首先請打開src資料夾下的index.js，你會看到:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

其中

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

就是React的程式進入點。
在這裡我們呼叫一個物件「ReactDOM」的render函式
此函式接收兩個參數:
第一個參數<h1> Hello world!</h1>是我們所渲染到畫面上的內容。
第二個參數document.getElementById('root')是React所綁定的原始div元素。

*註: 容易搞混的是這裡是使用已定義好的函式，照平常的排版習慣來看應該是:

ReactDOM.render( <h1> Hello world!</h1> ,  document.getElementById('root'));

只是因為render函式通常有很多參數，到最後會變很長，所以排版上習慣換行。

整體程式碼來說
上面的

import React from 'react';
import ReactDOM from 'react-dom';

是引入用npm載下來的React和ReactDOM
css檔不解釋，js檔在後面會用到
下面的serviceWorker.unregister();是和PWA有關，在這邊我們先不理他。

接下來我們回過頭來看這個div在哪。打開public資料夾底下的 index.html，你會看到: (為方便閱讀，註解我先拿掉)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

你會發現在body內只有一個 id 為 root 的「div」標籤，React就是被綁定在這裡。